<div class="step-description">
  {{ helptext.spareVdevDescription | translate }}
</div>

<ix-combobox
  class="spare-disk"
  [formControl]="spareVdevDisk"
  [label]="'Select Disk for Spare VDEV' | translate"
  [tooltip]="'Only one disk can be selected for the Spare VDEV' | translate"
  [provider]="diskComboboxProvider"
></ix-combobox>

@if (stepWarning()) {
  <p class="error-warning">
    {{ stepWarning() }}
  </p>
}

<ix-form-actions>
  <button
    mat-button
    matStepperPrevious
    color="accent"
    type="button"
    ixTest="back-spare"
  >
    {{ 'Back' | translate }}
  </button>
  <button
    mat-button
    matStepperNext
    color="primary"
    type="button"
    ixTest="next-spare"
  >
    {{ 'Next' | translate }}
  </button>

  <button
    mat-button
    color="error"
    type="button"
    ixTest="reset-fields-in-spare-step"
    (click)="resetStep()"
  >
    {{ 'Reset Step' | translate }}
  </button>

  <button
    mat-button
    color="accent"
    type="button"
    ixTest="save-and-go-to-review-spare"
    (click)="goToReviewStep()"
  >
    {{ 'Save And Go To Review' | translate }}
  </button>
</ix-form-actions>

